<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>打造你自己的视频播放器</title>
    <style>
        div#buttonDiv {
            width: 800px;
            display: none;
        }

        progress#playPercent {
            width: 800px;
        }

        div#progress {
            width: 800px;
            height: 20px;
            left: 0px;
            background: #ccc;
        }

        div#progressValue {
            width: 0%;
            height: 20px;
            background: green;
            cursor: default;
        }

        div#showTime {
            z-index: 2;
            display: none;
            position: absolute;
            font-size: 10px;
        }

        canvas {
            display: none;
        }
    </style>
</head>

<body>
    <video id="video" src="resourse/test.mp4" width="800">您的浏览器不支持video元素</video>
    <div id="buttonDiv" style="display:block;">
        <progress id="playPercent" max=100>
            <div id="progress">
                <div id="progressValue"></div>
            </div>
        </progress>
        <button id="btnPlay" onclick="PlayOrPause()" disabled />播放</button>
        <button id="btnSpeedUp" onclick="SpeedUp()" disabled />加速播放</button>
        <button id="btnSpeedDown" onclick="SpeedDown()" disabled />减速播放</button>
        <button id="btnSlowPlay" onclick="SlowPlay()" disabled />慢动作</button>
        <button id="btnMute" onclick="setMute()" disabled />静音</button>
        <button id="btnVolumeUp" onclick="VolumeUp()" disabled />增大音量</button>
        <button id="btnVolumeDown" onclick="VolumeDown()" disabled />降低音量</button>
        <button id="btnPlayBack" onclick="PlayBack()" disabled />回放</button>
        <button id="btnCatchPicture" onclick="CatchPicture()" disabled />截图</button>
    </div>
    <div id="showTime"></div>
    <canvas id="canvas" width="800" height="256"></canvas>
</body>
<script type="text/javascript">/*设定初始状态*/

    var speed = 1; //初始化播放速度为1

    var volume = 1; //初始化音量为1

    var muted = false; //初始化是否静音，false为不静音

    var direction = 1; //初始化播放进度值为1，用于控制回放功能

    /*获取播放对象*/

    var video = document.getElementById("video"); //获取播放器vedio标签

    var showTime = document.getElementById("showTime"); //获取播放时间隐藏层

    var functionId;

    /*为操作按钮添加事件，canPlayType用于检测浏览器是否支持视频*/

    if (video.canPlayType) {

        /*添加若干事件，执行对应的方法*/

        video.addEventListener('loadedmetadata', loadedmetadata, false); //视频加载事件

        video.addEventListener('ended', videoEnded, false); //播放中的进度事件

        video.addEventListener('play', videoPlay, false); //视频播放时的事件

        video.addEventListener('pause', videoPause, false); //视频暂停时的事件

        video.addEventListener('timeupdate', updateProgress, false); //播放进度位置改变时的事件

        video.addEventListener("error", catchError, false); //视频加载错误时的事件 

        progress = document.getElementById("progress"); //获取播放进度条

        progress.onmouseover = progress_mouseover;
        /*鼠标移入进度条上时显示播放时间和总播放时长*/

        progress.onmouseout = progress_mouseout;
        /*鼠标移出进度条时清除播放时间和总播放时长*/

        progress.onclick = progress_click;
        /*点击播放进度条div时调用跳转方法*/

        playPercent = document.getElementById("playPercent");
        /*获取播放进度条div */

        playPercent.onmouseover = progress_mouseover;
        /*鼠标移入进度条div上时显示播放时间和总播放时长*/

        playPercent.onmouseout = progress_mouseout;
        /*鼠标移出进度条div时清除播放时间和总播放时长*/

        playPercent.onclick = playPercent_click;
        /*点击播放进度条时调用跳转方法*/

    }

    /*视频error方法，如果报错则执行此方法提示用户*/

    function catchError() {

        var error = video.error;

        switch (error.code) {

            case 1:

                alert("视频的下载过程被中止。");

                break;

            case 2:

                alert("网络发生故障，视频的下载过程被中止。");

                break;

            case 3:

                alert("解码失败。");

                break;

            case 4:

                alert("媒体资源不可用或媒体格式不被支持。");

                break;

        }

    }

    /*播放与停止方法，通过对button的2个id切换，实现播放与暂定为同一个按钮*/

    function loadedmetadata() {

        var btnPlay = document.getElementById("btnPlay");

        btnPlay.innerHTML = "暂停";

        btnPlay.disabled = "";

        video.play();

        var buttonDiv = document.getElementById("buttonDiv");

        buttonDiv.style.display = "block";

    }

    /*浏览器支持video标签时触发的初始化方法*/

    function PlayOrPause() {

        if (video.paused) {

            video.play();

            video.playbackRate = speed;

            video.muted = muted;

            video.volume = volume;

        }

        else

            video.pause();

    }

    /*播放完毕后，用于恢复初始状态的方法*/

    function videoEnded(ev) {

        video.currentTime = 0;

        this.pause();

    }

    /*当播放时激活所有按钮*/

    function videoPlay(ev) {

        var btnPlay = document.getElementById("btnPlay");

        btnPlay.innerHTML = "暂停";

        document.getElementById("btnSpeedUp").disabled = "";

        document.getElementById("btnSpeedDown").disabled = "";

        document.getElementById("btnSlowPlay").disabled = "";

        document.getElementById("btnMute").disabled = "";

        document.getElementById("btnVolumeUp").disabled = "";

        document.getElementById("btnVolumeDown").disabled = "";

        document.getElementById("btnPlayBack").disabled = "";

        document.getElementById("btnCatchPicture").disabled = "";

        if (direction == -1)

            functionId = setInterval(playBack1, 200);

    }

    /*当暂停时禁用所有按钮*/

    function videoPause(ev) {

        var btnPlay = document.getElementById("btnPlay");

        btnPlay.innerHTML = "播放";

        document.getElementById("btnSpeedUp").disabled = "disabled";

        document.getElementById("btnSpeedDown").disabled = "disabled";

        document.getElementById("btnSlowPlay").disabled = "disabled";

        document.getElementById("btnMute").disabled = "disabled";

        document.getElementById("btnVolumeUp").disabled = "disabled";

        document.getElementById("btnVolumeDown").disabled = "disabled";

        document.getElementById("btnPlayBack").disabled = "disabled";

        document.getElementById("btnCatchPicture").disabled = "disabled";

        clearInterval(functionId);

    }

    /*播放进度的调用方法*/

    function updateProgress() {

        var value = Math.round((Math.floor(video.currentTime) / Math.floor(video.duration)) * 100, 0);

        var progress = document.getElementById('playPercent');

        progress.value = value;

        var progressValue = document.getElementById("progressValue");

        progressValue.style.width = value + "%";

        showTime.innerHTML = calcTime(Math.floor(video.currentTime)) + '/' + calcTime(Math.floor(video.duration));

    }

    /*播放进度的计算方法*/

    function calcTime(time) {

        var hour;

        var minute;

        var second;

        hour = String(parseInt(time / 3600, 10));

        if (hour.length == 1) hour = '0' + hour;

        minute = String(parseInt((time % 3600) / 60, 10));

        if (minute.length == 1) minute = '0' + minute;

        second = String(parseInt(time % 60, 10));

        if (second.length == 1) second = '0' + second;

        return hour + ":" + minute + ":" + second;

    }

    /*此方法用于显示：鼠标移动到div上时显示播放时间和总播放时长*/

    function progress_mouseover(ev) {

        showTime.style.display = "inline";

        showTime.style.left = ev.pageX + 5 + "px";

        showTime.style.top = ev.pageY + 5 + "px";

        showTime.innerHTML = calcTime(Math.floor(video.currentTime)) + '/' + calcTime(Math.floor(video.duration));

        ev.stopPropagation();

    }

    /*此方法用于清除：鼠标移出div时清除播放时间和总播放时长*/

    function progress_mouseout(ev) {

        showTime.style.display = "none";

        showTime.innerHTML = "";

    }

    /*跳转方法：点击播放进度条div，跳转到相应的进度上*/

    function playPercent_click(evt) {

        var o = window.event || evt; //写事件兼容

        /*IE和火狐的兼容，获取鼠标相对于目标事件的父元素的内边界在x坐标上的位置*/

        var coord_X = o.offsetX || o.layerX;

        playPercent = document.getElementById("playPercent");

        video.currentTime = video.duration * (coord_X / playPercent.clientWidth);

    }

    /*跳转方法：点击播放进度条，跳转到相应的进度上*/

    function progress_click(evt) {

        var o = window.event || evt; //写事件兼容

        /*IE和火狐的兼容，获取鼠标相对于目标事件的父元素的内边界在x坐标上的位置*/

        var coord_X = o.offsetX || o.layerX;

        progress = document.getElementById("progress");

        video.currentTime = video.duration * (coord_X / progress.clientWidth);

    }

    /*加速播放方法*/

    function SpeedUp() {

        video.playbackRate += 1;

        speed = video.playbackRate;

    }

    /*减速播放方法*/

    function SpeedDown() {

        video.playbackRate -= 1;

        if (video.playbackRate < 0)

            video.playbackRate = 0;

        speed = video.playbackRate;

    }

    /*慢动作方法*/

    function SlowPlay() {

        varbtnSlowPlay = document.getElementById("btnSlowPlay");

        if (btnSlowPlay.innerHTML == "慢动作") {

            video.playbackRate = 0.5;

            btnSlowPlay.innerHTML = "正常速度";

            document.getElementById("btnSpeedUp").disabled = "disabled";

            document.getElementById("btnSpeedDown").disabled = "disabled";

        }

        else {

            video.playbackRate = 1;

            btnSlowPlay.innerHTML = "慢动作";

            document.getElementById("btnSpeedUp").disabled = "";

            document.getElementById("btnSpeedDown").disabled = "";

        }

        speed = video.playbackRate;

    }

    /*是否静音方法*/

    function setMute() {

        if (!video.muted) {

            video.muted = true;

            document.getElementById("btnMute").innerHTML = "取消静音";

        }

        else {

            video.muted = false;

            document.getElementById("btnMute").innerHTML = "静音";

        }

        muted = video.muted;

    }

    /*增大音量方法*/

    function VolumeUp() {

        if (video.volume < 1)

            video.volume += 0.1;

        volume = video.volume;

    }

    /*降低音量方法*/

    function VolumeDown() {

        if (video.volume > 0)

            video.volume -= 0.1;

        volume = video.volume;

    }

    /*回放与取消回放方法*/

    function PlayBack() {

        var playBackBtn = document.getElementById("btnPlayBack");

        if (playBackBtn.innerHTML == "回放") {

            functionId = setInterval(playBack1, 200);

            playBackBtn.innerHTML = "取消回放";

            direction = -1;

        }

        else {

            clearInterval(functionId);

            playBackBtn.innerHTML = "回放";

            direction = 1;

        }

    }

    /*播放完毕后，提供回放功能的方法*/

    function playBack1() {

        var playBackBtn = document.getElementById("btnPlayBack");

        if (video.currentTime == 0) {

            playBackBtn.innerHTML = "回放";

            clearInterval(functionId);

        }

        else

            video.currentTime -= 1;

    }

    /*截图方法*/

    function CatchPicture() {

        var canvas = document.getElementById("canvas");

        var ctx = canvas.getContext('2d');

        canvas.width = video.videoWidth;

        canvas.height = video.videoHeight;

        ctx.drawImage(video, 0, 0, canvas.width, canvas.height);

        canvas.style.display = "block";

    }</script>

</html>